<template>
  <div id="SystemLibrary">
    <div class="content">
      <div class="top">
        <div class="logo">
          <img src="../../assets/img/balckTextLogo.png" alt="">
        </div>
        <div class="account">
          <span class="phone">{{ information.admin_user.name }}</span>
          <span class="bt">
            <el-button type="text" @click='logOff'>
              登出
            </el-button>
          </span>
        </div>
      </div>
      <div class="Librarybody">
        <div class="CurrentAccount">
          {{ information.admin_user.telephone }}
        </div>
        <div class="screen">
          <div class="left">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="全部" name="first">
              </el-tab-pane>
              <el-tab-pane label="商城系统" name="second"></el-tab-pane>
              <el-tab-pane label="PMS" name="third"></el-tab-pane>
              <el-tab-pane label="供应商系统" name="fourth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="right">
            <!-- 搜索门店 -->
            <div class="search">
              <el-input v-model="value" suffix-icon="el-icon-search"></el-input>
            </div>
            <div class="bt">
              <el-button type="primary" @click="add">创建门店</el-button>
            </div>
          </div>
        </div>
        <div class="Libray">
          <el-button type="text" v-for="item in hotel" :key="item.name" @click="GoPMS(item)" class="system">
            <span style="font-size:14px;display: block;margin-bottom: 20px;">PMS</span>
            <span style="font-size:18px;display: block;margin-bottom: 20px;">{{ item.name }}</span>
            <span style="font-size:12px;display: block;margin-bottom: 20px;">{{ item.update_time }}</span>
          </el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { GetHotel } from '@/api/basis.js'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      activeName: 'first',
      value: '',
      information: null,
      hotel: null,
    }
  },
  methods: {
    ...mapActions('d2admin/account', [
      'logout'
    ]),
    /**
     * @description 登出
     */
    logOff() {
      this.logout({
        confirm: true
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getSessionStorage() {
      let information = sessionStorage.getItem('account-information')
      this.information = JSON.parse(information)
    },

    /**
     * 跳转到创建门店，
     */
    add() {
      this.$router.push({ path: '/AddSystem' })
    },

    async getHotel() {
      await GetHotel().then(res => {
        this.hotel = res.data.data
        console.log(this.hotel,'hotel');
      })
    },
    GoPMS(item) {
      console.log(item);
      sessionStorage.setItem('hotel_id', item.id)
      sessionStorage.setItem('hotel_name', item.name)

      this.$store.dispatch("d2admin/hotel/saveHotel_id", { hotel_id: item.id }, { root: true });
      this.$router.push('/RoomStatus')
    }
  },
  created() {
    this.getSessionStorage()
    this.getHotel()
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
  border-radius: 4px 0 0 4px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
  border-radius: 0px 4px 4px 0px;
}

::v-deep .content {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: absolute;

  .Librarybody {
    .screen {
      display: flex;
      justify-content: space-between;

      .left {
        margin-top: 20px;

        .el-tabs--card>.el-tabs__header {
          border-bottom: 0px;

          .el-tabs__nav .is-top {
            background-color: white;
          }
        }

        .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
          font-size: 14px;
          border-color: rgba(4, 134, 254, 1);
          color: rgba(4, 134, 254, 1);
          border-width: 1px;
          border-right-style: solid;
          border-left-style: solid;
          border-top-style: solid;
        }
      }

      .right {
        line-height: 76px;

        .search {
          display: inline-block;
          width: 300px;
          margin-right: 20px;
        }

        .bt {
          display: inline-block;
        }
      }
    }

    .Libray {
      .system {
        text-align: left;
        padding-top: 16px;
        padding-left: 40px;
        color: black;
        width: 294px;
        height: 129px;

        background: #ffffff;
        // opacity: 0.4;
        /* 底部投影 */

        box-shadow: 0px 7px 10px 1px rgba(134, 134, 134, 0.24);
        border-radius: 4px;
      }
    }

    margin: 37px 56px;
  }

  .top {
    .account {
      float: right;
      line-height: 56px;
      margin-right: 20px;

      .phone {
        margin-right: 50px;
      }
    }

    width: 100%;
    background-color: white;
    height: 56px;

    .logo {
      top: 5px;
      left: 30px;
      position: absolute;
      text-align: center;
      font-size: 18px;
      color: #606266;
      display: flex;

      img {
        
      }
    }
  }

  .CurrentAccount {
    display: block;
  }
}
</style>